<template>
  <div class="h-screen w-full overflow-y-auto p-4">
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
      <div
        v-for="item in gameList"
        :key="item.name"
        class="flex flex-col bg-blue-100 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow"
      >
        <div class="w-full aspect-video bg-gray-200"></div>
        <div class="p-3 flex-1 flex flex-col justify-between">
          <div class="text-sm text-gray-700 truncate">{{ item.name }}</div>
          <div class="mt-2">
            <a-button @click="createFile(item)" type="primary" size="small" class="h-8 rounded">
              修改
            </a-button>
            <a-button
              @click="openEdit(item)"
              type="primary"
              size="small"
              :icon="h(EditOutlined)"
              class="h-8 rounded ml-2"
            >
              配置路径
            </a-button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <a-drawer
    class="rounded-l-2"
    v-model:open="open"
    :title="selectGame.name"
    placement="right"
  >
    <a-input-group compact>
      <a-input v-model:value="selectGame.path" style="width: 220px" />
      <a-button @click="handleReplaceFile(selectGame)" type="primary"
        >安装目录</a-button
      >
    </a-input-group>
    <template #footer>
      <div class="flex w-full justify-around px-50px">
        <a-button style="margin-right: 8px" @click="open = false"
          >取消</a-button
        >
        <a-button type="primary" @click="setGamePath">保存</a-button>
      </div>
    </template>
  </a-drawer>
</template>
<script setup>
import { ref, h, onMounted } from "vue";
import { ipcApiRoute } from "@/api";
import { ipc } from "@/utils/ipcRenderer";
import { EditOutlined } from "@ant-design/icons-vue";

const gameList = ref([
  { name: "王者荣耀", path: "" },
  { name: "和平精英", path: "" },
  { name: "PUBG", path: "" },
  { name: "LOL", path: "" },
  { name: "GTA5", path: "" },
  { name: "金铲铲", path: "" },
  { name: "战地6", path: "" },
  { name: "COD22", path: "" },
  { name: "跑跑卡丁车", path: "" },
]);

const selectGame = ref({
  name: "",
  path: "",
});
// 打开配置安装路径文件夹
const handleReplaceFile = async (item) => {
  selectGame.value = item;
  try {
    // 获取安装路径
    const res = await ipc.invoke(ipcApiRoute.win.selectDirectory);
    if (res) {
      selectGame.value.path = res;
    }
  } catch (error) {
    alert(`操作失败: ${error.message}`);
  }
};
// 保存按钮
function setGamePath() {
  ipc.invoke(ipcApiRoute.win.setGamePath, {
    name: selectGame.value.name,
    path: selectGame.value.path,

  });
  gameList.value.forEach((item) => {
    if (item.name === selectGame.value.name) {
      item.path = selectGame.value.path;
    }
  });
  open.value = false;
}
// 获取游戏路径
async function getGamePath() {
  const res = await ipc.invoke(
    ipcApiRoute.win.getGamePath,
    { name: selectGame.value.name}
  );
  selectGame.value.path = res;
  open.value = true;
}
// 抽屉打开
const open = ref(false);
function openEdit(item) {
  selectGame.value = item;
  getGamePath();
}

// 创建文件
async function createFile(item) {
  if(item.path === ''){
    alert('请先选择安装路径')
    return
  }
  ipc.invoke(ipcApiRoute.win.createFileTest, {
    content: item.name+'AAAAA',
    basePath: item.path,
    path: item.name+'.txt',
  });
}

// 初始化时候 获取所有的游戏路径
async function initGamePath() {
  gameList.value.forEach(async (item) => {
    const res = await ipc.invoke(ipcApiRoute.win.getGamePath, { name: item.name });
    item.path = res;
  });
}
onMounted(() => {
  initGamePath();
});
</script>
<style scoped></style>
